<template>
  <div id="menuChange">
    <p class="title">
      <svg style="font-size:20px" class="icon" aria-hidden="true">
        <use xlink:href="#iconcarousel" />
      </svg>
      <span>导航</span>
    </p>
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="图标内容" name="1">
        <div v-for="(v,i) in styles.imgUrl" class="add-pic">
          <div class="add-pic-top">
            <span>按钮图片：</span>
            <div>
              <div>
                <div>
                  <upLoadImage :v="styles.imgUrl[i].back[0]" :height="39"></upLoadImage>
                </div>
                <p>未选中</p>
              </div>
              <div>
                <div>
                  <upLoadImage :v="styles.imgUrl[i].front[0]" :height="39"></upLoadImage>
                </div>
                <p>选中</p>
              </div>

            </div>
          </div>
          <div class="add-pic-center">
            <span>按钮文字：</span>
            <div>
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="styles.imgUrl[i].text"
                maxlength="4"
                show-word-limit
                size="small"
                style="width:350px"
              />
            </div>
          </div>
          <div class="add-pic-bottom">
            <span>点击链接：</span>
            <div>
              <upLoadUrl :selectShow='selectShow' :v="styles.imgUrl[i]" :width="350"></upLoadUrl>
            </div>
          </div>
          <i @click="deletePic(i)" class="el-icon-error delete"></i>
        </div>
        <el-button @click="addPic" size="small" style="width:100%" plain>
          <i class="el-icon-plus"></i>
          <span>添加</span>
        </el-button>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="图标内容" name="2">
        <ul class="content-list">
          <li>
            <span style="width:120px">选中颜色：</span>
            <div>
              <colorSetting v-model="styles.colorSelect" :originColor="styles.colorSelect" initColor="#2D8CF0"></colorSetting>
            </div>
          </li>
          <li>
            <span style="width:120px">未选中颜色：</span>
            <div>
              <colorSetting v-model="styles.colorUnselect" :originColor="styles.colorUnselect" initColor="#999"></colorSetting>
            </div>
          </li>
<!--          <li>-->
<!--            <span style="width:120px">背景颜色：</span>-->
<!--            <div>-->
<!--              <colorSetting v-model="styles.colorBg" :originColor="styles.colorBg" initColor="#fff"></colorSetting>-->
<!--            </div>-->
<!--          </li>-->
          <li>
            <span style="width:120px">分割线颜色：</span>
            <div>
              <colorSetting v-model="styles.colorLine" :originColor="styles.colorLine" initColor="#eee"></colorSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState } from "vuex";
import upLoadImage from "../../comm/upLoadImage";
import upLoadUrl from "../../comm/uploadUrl";
import colorSetting from "../../comm/colorSetting";
export default {
  name: "menuChange",
  data() {
    return {
      activeNames1: "1",
      activeNames2: "2",
      selectShow:[true,false,false,false,false]
    };
  },
  computed: {
    ...mapState(["menu"]),
    styles() {
      return this.menu[0].styles;
    },
  },
  components: {
    upLoadImage,
    upLoadUrl,
    colorSetting
  },
  methods: {
    addPic() {
      if (this.styles.imgUrl.length >= 6) {
        this.$message.error("此元素最多允许添加六个！");
        return false;
      }

      this.styles.imgUrl.push({
        text: "按钮",
        url: "",
        front: [
          {
            img: "",
          },
        ],
        back: [
          {
            img: "",
          },
        ],
        url: "",
      });
      console.log(this.list);
    },
    deletePic(i) {
      if (this.styles.imgUrl.length == 1) {
        return false;
      }
      this.styles.imgUrl.splice(i, 1);
      console.log(this.list);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/css/base.less");
#menuChange {
  padding: 20px;
  .title {
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eaec;
    color: @mainColor;
    font-weight: bold;
    > span {
      font-size: 18px;
      color: #333;
      margin-left: 10px;
    }
  }
  .add-pic:hover {
    > .delete {
      display: block;
    }
  }
  .add-pic {
    padding: 20px;
    background-color: #f7f7f7;
    margin-bottom: 10px;
    position: relative;
    .delete {
      position: absolute;
      right: 0;
      top: 0;
      display: none;
      font-size: 20px;
    }
    > div {
      display: flex;
      justify-content: flex-start;
      > span:nth-of-type(1) {
        display: inline-block;
        width: 80px;
        margin-top: 5px;
        text-align: right;
      }
    }
    > div:nth-of-type(2) {
      margin: 20px 0;
    }
    > .add-pic-top {
      > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        > div {
          margin-right: 20px;
          text-align: center;
        }
      }
    }
  }
}
</style>
